<template>
  <div>
    <el-dialog :title="option.title" :visible.sync="isShow"  center @close="closeDialog" width="890px"
    @open="openCreate" :close-on-click-modal="false">
      <div v-loading="loading">
        <div class="content">
          <el-card>
            <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="140px" label-position="left">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="ID" label="状态ID">
                    <el-input v-model="form.ID" placeholder="请输入状态ID" :disabled="addShow"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="NAME" label="状态名">
                    <el-input v-model="form.NAME" placeholder="请输入状态名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="LEVELVALUE1" label="阀值1(分)">
                    <el-input v-model="form.LEVELVALUE1" placeholder="请输入阀值1"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="LEVELVALUE2" label="阀值2(分)">
                    <el-input v-model="form.LEVELVALUE2" placeholder="请输入阀值2"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item prop="REMARK1" label="备注1">
                    <el-input type="textarea" :rows="4" v-model="form.REMARK1" placeholder="请输入备注1"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item prop="REMARK2" label="备注2">
                    <el-input type="textarea" :rows="4" v-model="form.REMARK2" placeholder="请输入备注2"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click="cancelDialog">取消</el-button>
            <el-button size="mini" type="primary" @click="add">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import toolBox from "@/common/utils/toolBox";
import request1 from "@/common/utils/requestYg";
import add from "@/message/siteManagement/agentWarning/add";
import update from "@/message/siteManagement/agentWarning/update";
export default {
  data() {
    let validatorId = (rule, value, callback) => {
      //校验手机号
      if (value != "") {
        let reg = /^[0-9]*$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的阀值"));
        }
      } else {
        callback();
      }
    };
    return {
      loading: false,
      addShow: false,
      form: {
        ID: "",
        NAME: "",
        LEVELVALUE1: "",
        LEVELVALUE2: "",
        REMARK1: "",
        REMARK2: "",
      },
      rules:{
        ID: [{ 
          required: true, 
          message: "状态ID不能为空", 
          trigger: "blur" 
        }],
        NAME: [{
          required: true,
          message: "状态名不能为空",
          trigger: "blur"
        }],
        LEVELVALUE1: [
          {
            require: false,
            validator: validatorId,
            trigger: "blur"
          }
        ],
        LEVELVALUE2: [
          {
            require: false,
            validator: validatorId,
            trigger: "blur"
          }
        ]
      }
    }
  },
  props: {
    //从父元素传递的数据
    option: Object
  },
  computed: {
    isShow: {
      //创建用户弹窗是否显示
      get: function(){
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  // created: function() {
  //   this.depquery();
  // },
  watch: {
  },
  methods: {
    add() {
      this.$refs["form"].validate(valid => {
        if(valid) {
          //debugger
          this.loading = true;
         // console.log(this.option.log);
          let resBody = this.option.log == "1" ? new add() : new update();
          resBody.data.ID = this.form.ID;
          resBody.data.NAME = this.form.NAME;
          resBody.data.LEVELVALUE1 = this.form.LEVELVALUE1;
          resBody.data.LEVELVALUE2 = this.form.LEVELVALUE2;
          resBody.data.REMARK1 = this.form.REMARK1;
          resBody.data.REMARK2 = this.form.REMARK2;

          request1(resBody)
          .then(response => {
            console.log("返回信息"+response);
            if(response.SYS_HEAD.ReturnCode === "000000") {
              let mes = this.option.log == "1" ? "新增" : "修改";
              this.$message({
                type: "success",
                message: `坐席状态预警 + ${mes}${response.SYS_HEAD.ReturnMessage}!`
              });
                this.isShow = false;
                this.$emit("refreshTable");
            } else {
              this.$message({
                type: "error",
                message: `${response.SYS_HEAD.ReturnMessage}!`
              });
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          });
        } else {
          this.$message({
            type: "warning",
            message: "请输入合法的数据！"
          });
          return false;
        }
      });
    },
    openCreate() {
      //打开弹窗事件
      this.$nextTick(function() {
        if(this.option.log == "2") {
          this.addShow = true;
          this.updateData();
        } else {
          this.addShow = false;
          this.form.ID = "";
          this.form.NAME = "";
          this.form.LEVELVALUE1 = "";
          this.form.LEVELVALUE2 = "";
          this.form.REMARK1 = "";
          this.form.REMARK2 = "";
        }
      })
    },
    updateData(){
      this.form.ID = this.option.currentRow.ID;
      this.form.NAME = this.option.currentRow.NAME;
      this.form.LEVELVALUE1 = this.option.currentRow.LEVELVALUE1;
      this.form.LEVELVALUE2 = this.option.currentRow.LEVELVALUE2;
      this.form.REMARK1 = this.option.currentRow.REMARK1;
      this.form.REMARK2 = this.option.currentRow.REMARK2;
    },
    cancelDialog() {
      this.isShow=false;
      this.$refs.form.clearValidate();
      this.$refs.form.resetFields();
      this.$emit("refreshTable");
    },
    closeDialog() {
      //关闭弹窗并清除表单验证
      this.$refs.form.clearValidate();
      this.$refs.form.resetFields();
      this.$emit("refreshTable");
    }
  }
}
</script>
